import React, { useEffect,useLayoutEffect,useInsertionEffect } from "react";

export default function UseInsertionEffectDemo() {

  useEffect(()=>{
    console.log("useEffect");
  })
  
  useLayoutEffect(()=>{
    console.log("useLayoutEffect");
    const style = document.createElement("style");
    style.innerHTML = `
      .box{
        width:200px;
        height:200px;
        background-color:red
      }
    `
    document.head.appendChild(style);
  })
  
  useInsertionEffect(()=>{
    console.log("useInsertionEffect");
  })
  
  return (
    <div>
      <h1>useInsertionEffect</h1>
      <div className="box">我是盒子</div>
    </div>
  );
}
